import { Component, h } from 'preact';
import { observer } from 'mobx-react';
import _ from 'lodash-es';

import BaseNode from './BaseNode';

@observer
class Graph extends Component {

  handleClickSVG = (e) => {
    // console.log(this, e);
  }

  render() {
    console.log('Graph render');
    const { graphModel } = this.props;

    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="500" height="600"
        onClick={this.handleClickSVG}
      >
        {_.map(graphModel.nodes, nodeModel => (
          <BaseNode nodeModel={nodeModel} />
        ))}
      </svg>
    );
  }
}

export default Graph;
